import React, { FC, useCallback, useContext } from 'react';
import { View, Text } from '@tarojs/components';
import { styled } from 'linaria/react';
import { useClassName } from '@/utils/index';
import CardWrap from '@/components/CardWrap/CardWrap';
import '../common.css';
import { ChagePersonalInfoContext } from '../../ChagePersonalInfoContext';
export interface IProps extends ICompProps {}
NickName.defaultProps = {} as Partial<IProps>;
function NickName(props: IProps) {
    const { className, style } = props;
    const localClassName = useClassName('NickName', className);
    const { userInfo, setShowComponent } = useContext(ChagePersonalInfoContext);
    const click = useCallback(() => {
        console.log('修改昵称');

        setShowComponent('ChangeNickName');
        // console.log(showComponent);
    }, [setShowComponent]);
    return (
        <RootView className={localClassName} style={style} onClick={click}>
            <CardWrap className="NickName_CardWrap">
                <View className="title">修改昵称</View>
                <View className="content">{userInfo.nickName || '。'}</View>
            </CardWrap>
        </RootView>
    );
}
export default React.memo(NickName as FC<IProps>);
const cssBorder = '2px solid #F3F3F3';
const RootView = styled(View)`
    &.NickName {
        margin-bottom: 50px;
        .NickName_CardWrap {
            border-bottom: ${cssBorder};
        }
        .content {
            color: #333;
        }
    }
`;
